<template>
  <!-- 试卷管理容器 -->
  <div class="papers-management">
    <!-- 头部区域 -->
    <div class="header-section">
      <h2 class="page-title">试卷管理</h2>
      <button @click="showAddPaperModal" class="add-button primary-button">
        <i class="fas fa-plus"></i> 新建试卷
      </button>
    </div>

    <!-- 试卷表格 -->
    <div class="table-container">
      <table class="paper-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>试卷名称</th>
            <th>难度</th>
            <th>总分</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="paper in papers" :key="paper.id" class="table-row">
            <td>{{ paper.id }}</td>
            <td>{{ paper.paperName }}</td>
            <td>{{ paper.paperOrder }}</td>
            <td>{{ paper.score }}</td>
            <td class="action-buttons">
              <button @click="editPaper(paper.id)" class="icon-button edit">
                <i class="fas fa-edit"></i>
              </button>
              <button @click="deletePaper(paper.id)" class="icon-button delete">
                <i class="fas fa-trash-alt"></i>
              </button>
              <button  @click="editPaperDetail(paper.id)"  class="icon-button ">
                <i class="fas fa-trash-alt"></i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 模态框 -->
    <transition name="modal-fade">
      <div v-if="showModal" class="modal-overlay">
        <div class="modal-dialog">
          <div class="modal-header">
            <h3>{{ editingPaper ? '编辑试卷' : '创建新试卷' }}</h3>
            <button @click="closeModal" class="close-button">×</button>
          </div>
          <form @submit.prevent="savePaper" class="modal-form">
            <div class="form-field">
              <label class="form-label">试卷名称</label>
              <input type="text" v-model="currentPaper.paperName" required class="form-input">
            </div>
            <div class="form-field">
              <label class="form-label">科目</label>
              <input type="text" v-model="currentPaper.paperOrder" required class="form-input">
            </div>
            <div class="form-field dual-input">
              <div class="input-group">
                <label class="form-label">总分</label>
                <input type="number" v-model="currentPaper.score" required class="form-input">
              </div>
              <div class="input-group">
                <label class="form-label">时间限制（分钟）</label>
                <input type="number" v-model="currentPaper.timeLimit" required class="form-input">
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="primary-button">保存</button>
              <button type="button" @click="closeModal" class="secondary-button">取消</button>
            </div>
          </form>
        </div>
      </div>
    </transition>
      <Pagination
      :totalItems="totalPages"
      :itemsPerPage="5"
      :initialPage="1"
      @page-change="handlePageChange"
    />

  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import Pagination from '@/components/commont/Pagination.vue';
const router = useRouter()
const route = useRoute()
const selectedBank = ref('');
const pageSize = ref(8);
const totalPages=ref(1);
import { ExamService } from '@/api/exam';
const papers = ref([
  { id: 1, paperName: '数学期中考试', paperOrder: '数学', score: 100, timeLimit: 120 },
  { id: 2, paperName: '物理期末考试', paperOrder: '物理', score: 150, timeLimit: 90 },
  { id: 3, paperName: '英语单元测试', paperOrder: '英语', score: 80, timeLimit: 60 },
]);

const showModal = ref(false);
const editingPaper = ref(null);
const currentPaper = ref({
  paperName: '',
  paperOrder: '',
  score: 100,
  timeLimit: 60
});

const currentPage = ref(1);

const showAddPaperModal = () => {
  editingPaper.value = null;
  currentPaper.value = {
    paperName: '',
    paperOrder: '',
    score: 100,
    timeLimit: 60
  };
  showModal.value = true;


};
const  handlePageChange = (pageData)=>{
  currentPage.value = pageData.page;
  loadPapers(currentPage.value);
 console.log(pageData)
};

const editPaper = (id) => {
  const paper = papers.value.find(p => p.id === id);
  if (paper) {
    editingPaper.value = id;
    currentPaper.value = { ...paper };
    showModal.value = true;
  }
};


const editPaperDetail = (id) => {
  router.replace(
    {  path: '/paper-generator/edit',
    query: {
      id: id,
      action:"edit"
}})

};
 const loadPapers= async (page)=>{
   const response= await ExamService.getPaper({page: page,pageSize: 5})
   papers.value=response.data;
     totalPages.value=response.map.totalPage;
  currentPage.value=response.map.currentPage;
 }
onMounted(() => {
  loadPapers();
});
const deletePaper = (id) => {
  if (confirm('确定要删除这个试卷吗？')) {
    papers.value = papers.value.filter(p => p.id !== id);
  }
};

const savePaper = () => {
  // if (editingPaper.value) {
  //   const index = papers.value.findIndex(p => p.id === editingPaper.value);
  //   if (index !== -1) {
  //     papers.value[index] = { ...currentPaper.value, id: editingPaper.value };
  //   }
  // } else {
  //   const newId = Math.max(...papers.value.map(p => p.id)) + 1;
  //   papers.value.push({ ...currentPaper.value, id: newId });
  // }

  router.replace(
    {  path: '/paper-generator/edit',
    query: {
      action:"add",
      paperName:currentPaper.value.paperName,
      time:currentPaper.value.timeLimit,
      score:currentPaper.value.score
}})
  closeModal();
};

const closeModal = () => {
  showModal.value = false;
  editingPaper.value = null;
  currentPaper.value = {
    paperName: '',
    paperOrder: '',
    score: 100,
    timeLimit: 60
  };
};

</script>

<style scoped>
/* 基础样式 */
.papers-management {
  background-color:var(--el-bg-color-page);

  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  animation: slide-out-right 0.2s ease-in-out forwards;
  min-height: 80vh;
}
@keyframes slide-out-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }

}
/* 头部样式 */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.page-title {
  color: #2c3e50;
  font-size: 1.5rem;
  font-weight: 600;
}

/* 按钮样式 */
.primary-button {
  background: #42b883;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.primary-button:hover {
  background: #3aa876;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.icon-button {
  background: transparent;
  border: none;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.edit {
  color: #42b883;
}

.delete {
  color: #e53935;
}

.icon-button:hover {
  transform: scale(1.1);
}

/* 表格样式 */
.table-container {
  overflow-x: auto;
  border-radius: 8px;
}

.paper-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.paper-table th {
  color: #34495e;
  font-weight: 600;
  padding: 1.2rem;
  text-align: left;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.table-row {
  transition: all 0.2s ease;
}

.table-row:hover {
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.paper-table td {
  padding: 1rem;
  border-bottom: 1px solid #f0f2f5;
}

.paper-table tr:last-child td {
  border-bottom: none;
}

/* 斑马纹 */
/* .paper-table tr:nth-child(even) {
} */

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-dialog {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-button {
  font-size: 1.5rem;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close-button:hover {
  color: #333;
}

.modal-form {
  padding: 1.5rem;
}

.form-field {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: #555;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  border-color: #42b883;
  outline: none;
}

.dual-input {
  display: flex;
  gap: 1rem;
}

.input-group {
  flex: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f2f5;
}

.secondary-button {
  background: #f8f9fa;
  color: #333;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.secondary-button:hover {
  background: #e9ecef;
}

/* 过渡动画 */
.modal-fade-enter-active, .modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from, .modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-active .modal-dialog,
.modal-fade-leave-active .modal-dialog {
  transition: transform 0.3s ease;
}

.modal-fade-enter-from .modal-dialog {
  transform: translateY(-20px);
}

.modal-fade-leave-to .modal-dialog {
  transform: translateY(20px);
}
</style>
